<template>
	<view class="chatview">
		<view class="main" v-if="!showEmedia && !showmultiEmedia">
			<chat-suit-audio ref="audio" :username="username" :chatType="chatType" @newAudioMsg="saveSendMsg"></chat-suit-audio>

			<chat-msglist ref="msglist" :username="username" @msglistTap="normalScroll"></chat-msglist>
		</view>
		<chat-inputbar
			ref="inputbar"
			:username="username"
			:chatType="chatType"
			@newTextMsg="saveSendMsg"
			@newImageMsg="saveSendMsg"
			@newLocationMsg="saveSendMsg"
			@newVideoMsg="saveSendMsg"
			@tapSendAudio="toggleRecordModal"
			@inputBlured="normalScroll"
			@makeVideoCall="onMakeVideoCall"
			@makeAudioCall="onMakeAudioCall"
			:style="'display: ' + inputbarVisible"
		></chat-inputbar>

		<chat-multiEmedia
			:style="'display: ' + multiEmediaVisible"
			:username="username"
			:groupId="groupId"
			:action="emediaAction"
			@inviteMember="onInviteMember"
			@createConfrSuccess="onCreateConfrSuccess"
			@hangup="onHangup"
			v-if="showmultiEmedia"
		></chat-multiEmedia>

		<chat-emediaInvite :username="username" :action="action" @startConfr="onStartConfr" @goBack="onGoBack" v-if="showEmediaInvite"></chat-emediaInvite>
	</view>
</template>

<script>
import chatMsglist from '@/comps/chat/msglist/msglist.vue';
import chatInputbar from '@/comps/chat/inputbar/inputbar.vue';
import chatSuitAudio from '@/comps/chat/inputbar/suit/audio/audio.vue';
import chatMultiEmedia from '@/comps/chat/multiEmedia/multiEmedia';
import chatEmediaInvite from '@/comps/chat/emediaInvite/emediaInvite';

let msgStorage = require('./msgstorage');
let msgType = require('./msgtype');
export default {
	components: {
		chatMsglist,
		chatInputbar,
		chatSuitAudio,
		chatMultiEmedia,
		chatEmediaInvite
	},
	props: {
		username: {
			type: Object,
			value: {}
		},
		chatType: {
			type: String,
			value: msgType.chatType.SINGLE_CHAT
		}
	},
	data() {
		return {
			pubUrl: '',
			subUrl: '',
			showEmedia: false,
			showmultiEmedia: false,
			showEmediaInvite: false,
			action: null,
			emediaAction: {},
			multiEmediaVisible: 'block',
			inputbarVisible: 'block',
			confrId: '',
			groupId: '',
			confrMember: ''
		};
	},
	created() {
		uni.$on('saveSendMsg', data => {
			this.saveSendMsg(data);
		});
	},
	beforeDestroy() {
		uni.$off('saveSendMsg');
	},

	onReady() {},
	methods: {
		toggleRecordModal() {
			this.$refs.audio.toggleRecordModal();
		},

		normalScroll() {
			this.$refs.inputbar.cancelEmoji();
		},

		saveSendMsg(data) {
			msgStorage.saveMsg(data.msg, data.type);
		},

		getMore() {
			this.$refs.msglist.getHistoryMsg();
		},

		onMakeVideoCall() {
			this.showEmediaInvite = true;
			this.inputbarVisible = 'none';
			this.action = 'create';
			console.log('邀请');
		},

		onStartConfr(data) {
			console.log('发起邀请的回调', data.detail);
			this.showEmediaInvite = false;
			this.showmultiEmedia = true;
			this.multiEmediaVisible = 'block';
			this.inputbarVisible = 'none';
			this.confrMember = data.detail.confrMember;
			this.emediaAction.action = 'create';

			if (data.detail.action == 'invite') {
				this.sendInviteMsg(data.detail.confrMember, getApp().globalData.confrId);
			}
		},

		onGoBack() {
			this.showEmediaInvite = false;
			this.showmultiEmedia = true;
			this.multiEmediaVisible = 'block';
			this.inputbarVisible = 'none';
			this.confrMember = [];
		},

		onInviteMember(e) {
			let username = this.username;

			if (!this.username.groupId) {
				username.groupId = e.detail;
			}

			this.action = 'invite';
			this.showEmediaInvite = true;
			this.inputbarVisible = 'none';
			this.multiEmediaVisible = 'none';
			this.username = username;
		},

		onMakeAudioCall() {
			this.showEmediaInvite = true;
			this.showmultiEmedia = false;
			this.inputbarVisible = 'none';
		},

		onCreateConfrSuccess(data) {
			console.log('创建会议回调', data);
			this.confrId = data.detail.confrId;
			getApp().globalData.confrId = data.detail.confrId;
			this.sendInviteMsg(this.confrMember, data.detail.confrId, data);
		},

		sendInviteMsg(members, confrId, data) {
			console.log('%c members', 'background: green');
			console.log(members);
			members &&
				members.forEach(value => {
					let id = this.$im.conn.getUniqueId();
					console.log(this.$im.conn);
					let userId = this.$im.conn.context.userId;
					let msg = new this.$im.message('txt', id);
					msg.set({
						msg: userId + ' invite you to video call',
						from: userId,
						to: value,
						roomType: false,
						chatType: 'chat',
						ext: {
							msg_extension: JSON.stringify({
								inviter: userId,
								group_id: this.username.groupId
							}),
							roomName: (data && data.detail.roomName) || '',
							password: (data && data.detail.password) || '',
							conferenceId: confrId
						},

						success(id, serverMsgId) {
							console.log('发送邀请消息成功 to: ' + value);
						},

						fail(id, serverMsgId) {
							console.log('发送邀请消息失败了');
						}
					});

					console.log('发送邀请', msg.body);
					this.$im.conn.send(msg.body);
				});
		},

		onClickInviteMsg(data) {
			console.log('收到邀请消息');
			console.log(data);
			let confrId = data.detail.conferenceId;
			let msg_extension = typeof data.detail.msg_extension == 'string' ? JSON.parse(data.detail.msg_extension) : data.detail.msg_extension;
			let password = data.detail.password || '';
			this.emediaAction.action = 'join';
			this.emediaAction.confrId = confrId;
			this.emediaAction.password = password;
			this.emediaAction.roomName = data.detail.roomName || '';
			this.showEmediaInvite = false;
			this.showmultiEmedia = true;
			this.inputbarVisible = 'none';
			this.groupId = msg_extension.group_id;
		},

		onHangup() {
			this.showEmediaInvite = false;
			this.showmultiEmedia = false;
			this.inputbarVisible = 'block';
			getApp().globalData.confrId = '';
		},
		
	}
};
</script>

<style>
page,
.chatview {
	height: 100%;
}
.main {
	width: 100%;
	height: 100%;
	padding-bottom: 160upx;
	box-sizing: border-box;
}
</style>
